var MVVM = function(option){
    this.$option = option;
    var me = this;
    this.$el = option.el || "";
    this.$data = option.data || "";

    // console.log(window)
    // setTimeout(()=>{
    //     option.created();
    // },500)
    document.onreadystatechange=function(state){
        // console.log(document.readyState)
        if(document.readyState === 'interactive'){
            if(option.created)
                option.created();
        }else if(document.readyState === 'complete'){
            if(option.mounted)
                option.mounted();
        }
    }

    Object.keys(this.$data).forEach(function(key) {
        me._proxyData(key);
    });

    // console.log(this.$data)
    
    new Observe(this,this.$data);
    new Compile(this,this.$el,this.$data,option);
}

MVVM.prototype = {
    _proxyData: function(key, setter, getter) {
        var me = this;
        // console.log(me.$option)
        setter = setter || 
        Object.defineProperty(me.$option, key, {
            configurable: true,
            enumerable: true,
            get: function() {
                // console.log(me.$data[key])
                return me.$data[key];
            },
            set: function(newVal) {
                // console.log(newVal)
                me.$data[key] = newVal;
                return me.$data[key]
            }
        });
    },
}